<template>
  <div class="app-container">

    <el-form :inline="true" :model="filter" class="demo-form-inline">
      <el-form-item>
        <el-button type="success" @click="handleAdd()">添加</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading"
              :data="page.list" stripe border
              style="width: 100%">
      <el-table-column
        prop="name"
        label="名称" min-width="100">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button-group>
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑
            </el-button>
            <el-button size="mini"
                       type="danger"
                       @click="handleDelete(scope.$index, scope.row)">删除
            </el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination style="margin-top:20px;"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="page.number"
                   :page-sizes="[10, 20, 50, 100]"
                   :page-size="page.size"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="page.totalElements">
    </el-pagination>

    <el-dialog title="编辑" :visible.sync="form.visible">
      <category-edit ref="form" @saved="handleSaved"></category-edit>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import CategoryAPI from '@/api/business/category';
import CategoryEdit from './GradeEdit';
import { PageMethods } from '@/utils/crud';

export default {
    components: { CategoryEdit },
    data() {
        return {
            loading: 0,
            filter: {
                type: null
            },
            page: {
                totalPage: 1,
                current: 1,
                totalElements: 2,
                size: 10,
                list: []
            },
            form: {
                visible: false
            }
        };
    },
    computed: {
        ...mapGetters([
            'dictionary'
        ])
    },
    created() {
        this.getPage();
    },
    methods: Object.assign(PageMethods(CategoryAPI), {})
};
</script>

<style>

</style>
